<template>
  <div :class="itemCardStyle">
    <div class="flex gap-2">
      <div class="flex-1 overflow-hidden text-ellipsis text-nowrap text-base">
        {{ item.title }}
      </div>
      <div
        :class="itemTagStyle"
        :style="{
          backgroundColor: item.type == 0 ? '#63b2ff' : '#f65160',
        }"
      >
        {{ item.type == 0 ? "加" : "扣" }}分
      </div>
    </div>
    <div class="flex gap-2 mt-2">
      <a-tag bordered>人数：{{ item.numberOfPeople }}人</a-tag>
      <a-tag bordered>分值：{{ item.point }}分</a-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MultipleChangeItem } from "../../types";

defineProps<{
  item: MultipleChangeItem;
}>();
const { isDarkMode } = useTheme();
const itemCardStyle = computed(() => {
  return `flex flex-col p-3 rounded ${unref(isDarkMode) ? "bg-bg-5" : "bg-[#f7f9fc]"}`;
});
const itemTagStyle = "relative top-[-12px] right-[-12px] px-3 py-1 rounded-bl-lg text-white";
</script>

<style scoped></style>
.item
